<template>
  <div class="inhand">
    <el-row style="padding: .2rem .2rem" :gutter="10">
      <el-col :span="4">
        <el-date-picker
          style="width: 100%;"
          v-model="time"
          @change="chooseTime"
          type="daterange"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>

      <el-col :span="4">
        <el-select style="width: 100%;" clearable v-model="serialNumber "
                   @change="pageNum = 1;currentPage = 1;getPage()" placeholder="请选择档案号">
          <el-option
            v-for="item in numberList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="3">
        <el-select v-model="level" clearable @change="pageNum = 1;currentPage = 1;getPage()" placeholder="请选择保护级别">
          <el-option label="国家一级" value="国家一级"></el-option>
          <el-option label="国家二级" value="国家二级"></el-option>
          <el-option label="北京市重点" value="北京市重点"></el-option>
          <el-option label="北京市一级" value="北京市一级"></el-option>
          <el-option label="北京市二级" value="北京市二级"></el-option>
          <el-option label="三有动物" value="三有动物"></el-option>
          <el-option label="其它" value="其它"></el-option>
        </el-select>
      </el-col>

      <el-col :span="3">
        <el-select v-model="accomplish" :clearable="false"
                   @change="pageNum = 1;currentPage = 1;getgetNumber();getPage()">
          <el-option label='全部' :value='2'></el-option>
          <el-option label='已救助完成' :value='1'></el-option>
          <el-option label='未救助完成' :value='0'></el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-input placeholder="搜索动物名称" v-model="keyword" class="input-with-select">
          <el-button @click="pageNum = 1;currentPage = 1;getPage()" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>

      <el-col :span="6" style="text-align: right">
        <el-button size="small" style="background-color: #00CC46; color: #FFFFFF">
          <a
            :href="'/api/rescue/downloadExcel?areaId='+areaId +'&startDate'+ startDate+'=&endDate='+ endDate+'&level='+ level+'&keyword='+ keyword+'&serialNumber='+serialNumber"
            style="display: inline-block;width: 100%;height: 100%;color: white">数据导出</a>

        </el-button>
        <el-button @click="openform(0,'')" size="small" style="background-color: #00CC46; color: #FFFFFF">新增救助
        </el-button>
      </el-col>
    </el-row>

    <table>
      <thead>
      <th>档案号</th>
      <th>接收时间</th>
      <th>动物名称</th>
      <th>保护级别</th>
      <th>健康状态</th>
      <th>救助完成</th>
      <th>操作</th>
      </thead>

      <tbody>
      <tr v-for="item in pageList">
        <td>{{item.serialNumber}}</td>
        <td>{{item.insertDate|cDate}}</td>
        <td>{{item.animalName}}</td>
        <td>{{item.protectionLevel}}</td>
        <td class="wzd">{{item.monitoringStatus}}</td>
        <td> {{item.accomplish ==0?'未完成':'已完成'}}</td>
        <td>
          <!--<span class="czs" @click="openform(1,item)">详情</span>-->
          <span class="czs" @click="openform(2,item)">修改</span>
          <span class="czs" style="color: red" @click="shanchu(item)">删除</span>
        </td>
      </tr>
      </tbody>
    </table>


    <!--分页 B-->
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="12"
        layout="total, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
    </div>
    <!--分页 E-->

    <!--新增-->
    <div class="formBox" v-if="isform">
      <div class="xqtitle">
        <div style="font-size: .16rem;font-weight: 700;">
          <span>完善救助信息</span>
        </div>

        <el-button size="small" @click="closeform" style="background: #01C144;color: white">
          返回
        </el-button>
      </div>

      <!--版心 B-->
      <div class="banxin">
        <el-form :model="ruleForm" label-position="top" ref="ruleForm" label-width="260px"
                 class="demo-ruleForm">

          <div class="zdytitle">
            <span>救助动物信息</span>
          </div>

          <el-form-item label="档案号">
            <el-input v-model="ruleForm.serialNumber"></el-input>
          </el-form-item>

          <el-form-item label="接收时间">
            <el-date-picker
              style="width: 100%;"
              v-model="ruleForm.insertDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>


          <el-form-item label="动物名称">
            <el-input v-model="ruleForm.animalName" @change="getSpecimenLevel(ruleForm.animalName)"></el-input>
          </el-form-item>

          <el-form-item label="保护级别">
            <el-select v-model="ruleForm.protectionLevel" style="width: 100%;" placeholder="请选择保护级别">
              <el-option label="国家一级" value="国家一级"></el-option>
              <el-option label="国家二级" value="国家二级"></el-option>
              <el-option label="北京市重点" value="北京市重点"></el-option>
              <!-- <el-option label="北京市一级" value="北京市一级"></el-option>
              <el-option label="北京市二级" value="北京市二级"></el-option> -->
              <el-option label="三有动物" value="三有动物"></el-option>
              <el-option label="其它" value="其它"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="动物所属目，科，属">
            <el-input v-model="ruleForm.keMu"></el-input>
          </el-form-item>

          <el-form-item label="动物数量">
            <el-input v-model="ruleForm.quantity" type="number"></el-input>
          </el-form-item>

          <el-form-item label="健康状态">
            <el-input type="textarea" v-model="ruleForm.monitoringStatus"></el-input>
          </el-form-item>

          <!--动物照片-->
          <div style="width: 100%;margin-bottom: .22rem;overflow: hidden">
            <!--<span style="color: red;margin-right: 0.04rem;">*</span>-->
            <div style="line-height: .4rem;"><span>动物照片</span>
            </div>

            <div class="animal clearfix">
              <div class="previewbox" v-for="(i,index) in previewList">

                <div class="deleted" @click="delImg(i,index,'0')">
                  <span class="el-icon-delete-solid" style="color: red;font-size: .3rem;"></span>
                </div>
                <img :src="i.imageUrl" alt="">
              </div>

              <div class="upload">
                <div class="uploadbutton">
                  <input style="width: 100%;height: 100%; cursor: pointer;" @change="getimgList($event)" ref="upload"
                         type="file" multiple="multiple" accept="image/*"/>
                </div>
                <img src="/static/images/add.png" alt="">
              </div>

            </div>
          </div>
          <!--动物照片-->

          <!--救助位置 B-->
          <div style="width: 100%;margin-bottom: .22rem;overflow: hidden">
            <div style="line-height: .4rem;"><span style="color: red;margin-right: 0.04rem;">*</span><span>救助位置</span>
            </div>

            <div style="margin-bottom: .22rem;">
              <div><span style="font-size: .12rem;color: #a2a200">（为避免用户经纬度输入错误，请用户在下面地图搜索选择地点，选择完毕会自动填写）</span></div>
              <el-input v-model="address" :disabled="true" placeholder="请在下面地面搜索地名，点击选择位置"></el-input>
            </div>


            <div class="mapbox" id="container">
              <div class="sss">
                <el-input placeholder="请输入地点名称" style="width: 3rem;" v-model="keywords" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="xzdd"></el-button>
                </el-input>

                <div class="ssjg" v-show="addressList.length>0">
                  <div v-for="item in addressList" @click="getla(item)"
                       style="padding-left: .1rem;border-bottom: 1px solid #999999;">
                    <div><span style="font-size: .14rem;font-weight: 700;line-height: .35rem;">{{item.name}}</span>
                    </div>
                    <div><span
                      style="font-size: .14rem;color: #666666;margin-bottom: 2px;">地址:</span><span>{{item.address}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <!--救助位置 E-->

          <div class="zdytitle">
            <span>热心市民信息</span>
          </div>

          <el-form-item label="救助人姓名">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>

          <el-form-item label="救助人电话">
            <el-input onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="ruleForm.contact"></el-input>
          </el-form-item>

          <el-form-item label="地址/单位">
            <el-row>
              <el-col :span="12">
                <el-select v-model="ruleForm.address" style="width: 100%;" placeholder="请选择所属地">
                  <el-option label="大榆树镇" value="大榆树镇"></el-option>
                  <el-option label="八达岭镇" value="八达岭镇"></el-option>
                  <el-option label="大庄科乡" value="大庄科乡"></el-option>
                  <el-option label="井庄镇" value="井庄镇"></el-option>
                  <el-option label="旧县镇" value="旧县镇"></el-option>
                  <el-option label="刘斌堡乡" value="刘斌堡乡"></el-option>
                  <el-option label="千家店镇" value="千家店镇"></el-option>
                  <el-option label="四海镇" value="四海镇"></el-option>
                  <el-option label="永宁镇" value="永宁镇"></el-option>
                  <el-option label="珍珠泉乡" value="珍珠泉乡"></el-option>
                  <el-option label="香营乡" value="香营乡"></el-option>
                  <el-option label="沈家营镇" value="沈家营镇"></el-option>
                  <el-option label="康庄镇" value="康庄镇"></el-option>
                  <el-option label="延庆镇" value="延庆镇"></el-option>
                  <el-option label="张山营镇" value="张山营镇"></el-option>
                  <el-option label="香水园街道" value="香水园街道"></el-option>
                  <el-option label="儒林街道" value="儒林街道"></el-option>
                  <el-option label="百泉街道" value="百泉街道"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-input v-model='ruleForm.addressInfo' placeholder="请输入详细地址"></el-input>
              </el-col>
            </el-row>

          </el-form-item>

          <!--市民照片-->
          <div style="width: 100%;margin-bottom: .22rem;overflow: hidden">
            <!--<span style="color: red;margin-right: 0.04rem;">*</span>-->
            <div style="line-height: .4rem;"><span>市民照片</span>
            </div>

            <div class="animal clearfix">
              <div class="previewbox" v-for="i in citizenPhoto">
                <div class="deleted" @click="delImg(i,index,'1')">
                  <span class="el-icon-delete-solid" style="color: red;font-size: .3rem;"></span>
                </div>
                <img :src="i.imageUrl" alt="">
              </div>

              <div class="upload">
                <div class="uploadbutton">
                  <input style="width: 100%;height: 100%; cursor: pointer;" @change="getcitizen($event)" ref="citizen"
                         type="file" accept="image/*"
                         multiple="multiple"/>
                </div>
                <img src="/static/images/add.png" alt="">
              </div>

            </div>
          </div>
          <!--市民照片-->

          <div class="zdytitle">
            <span>救护信息</span>
          </div>


          <el-form-item label="接收人员">
            <el-input v-model="ruleForm.receiver"></el-input>
          </el-form-item>

          <el-form-item label="救护方式">
            <el-select v-model="ruleForm.rescueMode" style="width: 100%;" placeholder="请选择救护方式">
              <el-option label="收容救治" value="收容救治"></el-option>
              <el-option label="放归自然" value="放归自然"></el-option>
              <el-option label="移送市救护中心" value="移送市救护中心"></el-option>
              <el-option label="其它" value="其它"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="其他救护方式" v-if="ruleForm.rescueMode=='其它'">
            <el-input v-model="ruleForm.otherRescueMode"></el-input>
          </el-form-item>

          <el-form-item label="收容救护过程">
            <el-input type="textarea" v-model="ruleForm.rescueProcess"></el-input>
          </el-form-item>

          <el-form-item label="恢复饲养过程">
            <el-input type="textarea" v-model="ruleForm.recoveryProcedure"></el-input>
          </el-form-item>

          <div class="zdytitle">
            <span>处理信息</span>
          </div>

          <el-form-item label="处置建议">
            <el-input type="textarea" v-model="ruleForm.suggest"></el-input>
          </el-form-item>

          <!--<el-form-item label="确认意见">-->
          <!--<el-input type="textarea" v-model="ruleForm.estimate"></el-input>-->
          <!--</el-form-item>-->

          <el-form-item label="处理过程及结果">
            <el-input type="textarea" v-model="ruleForm.disposeResult"></el-input>
          </el-form-item>


          <!--处理过程及结果照片-->
          <div style="width: 100%;margin-bottom: .22rem;overflow: hidden">
            <!--<span style="color: red;margin-right: 0.04rem;">*</span>-->
            <div style="line-height: .4rem;"><span>处理结果</span>
            </div>

            <div class="animal clearfix">
              <div class="previewbox" v-for="i in jiuzhuguocheng">
                <div class="deleted" @click="delImg(i,index,'2')">
                  <span class="el-icon-delete-solid" style="color: red;font-size: .3rem;"></span>
                </div>
                <img :src="i.imageUrl" alt="">
              </div>

              <div class="upload">
                <div class="uploadbutton">
                  <input style="width: 100%;height: 100%; cursor: pointer;" @change="getjzgc($event)" ref="jzgc"
                         type="file" accept="image/*"
                         multiple="multiple"/>
                </div>
                <img src="/static/images/add.png" alt="">
              </div>

            </div>
          </div>
          <!--处理过程及结果照片-->

          <div class="zdytitle">
            <span>其他信息 <span style="font-size: .12rem;color: red;margin-left: .1rem;">(注意！需要选择样本➡➡➡)</span></span>
            <el-select v-model="value" filterable @change="getgetSpecimenInfo(value)" placeholder="请选择样本">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div
            style="width: 100%;height: 5rem;margin-top: .1rem;display: flex;align-items: center;justify-content: center">
            <img style="max-height: 100%;max-width: 100%" :src="Specimen.fileUrl" alt="">
          </div>

          <div class="ldwz">
            <span style="flex: 1;text-align-last: justify;">动物名称：</span>
            <span style="flex: 9">{{Specimen.animalName}}</span>
          </div>
          <div class="ldwz">
            <span style="flex: 1;text-align-last: justify;">动物描述：</span>
            <span style="flex: 9">{{Specimen.description}}</span>
          </div>

          <div class="ldwz">
            <span style="flex: 1;text-align-last: justify;">分布范围：</span>
            <span style="flex: 9">{{Specimen.distributionRange}}</span>
          </div>

          <div class="ldwz">
            <span style="flex: 1;text-align-last: justify;">分布状况：</span>
            <span style="flex: 9">{{Specimen.distributionStatus}}</span>
          </div>
          <div class="ldwz">
            <span style="flex: 1;text-align-last: justify;">动物习性：</span>
            <span style="flex: 9">{{Specimen.characteristic}}</span>
          </div>
        </el-form>
      </div>
      <!--版心 E-->
      <div style="text-align: right;margin-top: .3rem;background-color: #F3FFF7;padding: .1rem 0">
        <div style="width: 50%;margin: 0 auto">
          <!--<el-button style="margin-right: .2rem;">编辑</el-button>-->
          <el-button type="primary" style="position: relative" v-show="ruleForm.accomplish ==1">
            <a
              :href="'/api/rescue/downloadWord?id='+ ruleForm.id"
              style="display:inline-block;width: 100%;height: 100%; cursor: pointer;position: absolute;top: 0;left: 0;z-index:2;opacity: 0;"></a>
            导出
          </el-button>
          <el-button @click="submitForm('ruleForm')" v-show="ruleForm.accomplish ==0" type="primary">保存</el-button>
          <el-button @click="helpover" style="margin: 0 2rem 0 1rem">完成救助</el-button>
        </div>

      </div>
    </div>
    <!--新增-->
  </div>
</template>

<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import AMap from "AMap";

  export default {
    name: "inhand",
    data() {
      return {
        accomplish: 2,
        accoption: [
          {
            label: 2,
            value: '全部'
          }, {
            label: 1,
            value: '已救助完成'
          }, {
            label: 0,
            value: '未救助完成'
          },
        ],
        isform: false,
        level: "",
        keyword: "",
        pageNum: 1,
        pageList: [],
        totalElements: 0,
        numberList: [],
        serialNumber: "",
        address: "",
        addressList: [],
        keywords: '',
        previewList: [],
        citizenPhoto: [],
        jiuzhuguocheng: [],
        ruleForm: {
          addressInfo: "",
          quantity: "",
          keMu: "",
          otherRescueMode: "",
          serialNumber: "",
          animalName: '',
          insertDate: "",
          protectionLevel: "",
          monitoringStatus: "",
          name: "",
          contact: "",
          address: "",
          receiver: "",
          rescueMode: "",
          rescueProcess: "",
          suggest: "",
          estimate: "",
          disposeResult: "",
          recoveryProcedure: ""
        },
        time: "",
        options: [],
        value: '',
        currentPage: 1,
        map: null,
        marker: null,
        areaId: '',
        startDate: "",
        endDate: "",
        uuid: "",
        Specimen: {},
        xiangxidizhi: ""
      }
    },
    mounted() {
      this.areaId = window.sessionStorage.getItem('areaId');
      this.getPage();
      this.getgetNumber();
      this.getgetSpecimenName();
    },
    methods: {
      helpover() {
        let obj = Object.assign({}, this.ruleForm), _that = this;
        // obj['address'] = this.address;
        obj['id'] = this.uuid;
        obj['areaId'] = this.areaId;
        obj.accomplish = 1;
        obj['sampleId'] = this.value;
        if (this.address != '') {
          obj['lon'] = this.address.split(',')[0];
          obj['lat'] = this.address.split(',')[1];
        } else {
          obj['lon'] = ""
          obj['lat'] = ""
        }

        let nobj = {
          serialNumber: obj.serialNumber,
          insertDate: obj.insertDate,
          animalName: obj.animalName,
          protectionLevel: obj.protectionLevel,
          monitoringStatus: obj.monitoringStatus,
          name: obj.serialNumber,
          serialNumber: obj.name,
          contact: obj.contact,
          address: obj.address
        };

        for (let k in nobj) {
          if (obj[k] == '') {
            _that.$message({
              type: 'warning',
              message: '请完善表单项!'
            });
            return false;
          }
        }
        // if (this.previewList.length == 0 || this.citizenPhoto.length == 0 || this.jiuzhuguocheng.length == 0) {
        //   _that.$message({
        //     type: 'warning',
        //     message: '请补全救助动物/人/结果照片!'
        //   });
        //   return false;
        // }

        if (this.value == 0) {
          _that.$message({
            type: 'warning',
            message: '请选择样本类型!'
          });
          return false;
        }
        obj.insertDate = new Date(obj.insertDate).getTime();
        (async function f() {
          let res = await http.post(api.addOrUpdate, obj)
          if (res.data.code == '200') {
            _that.$message({
              message: '救助完成',
              type: 'success'
            });
            _that.isform = false;
            _that.getPage();
          } else {
            _that.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        })()

      },
      delImg(data, index, type) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _that = this;
          (async function f() {
            let res = await http.delete(api.deleteImage + '?id=' + data.id)
            if (res.data.code == '200') {
              if (type == '0') {
                _that.previewList.splice(index, 1)
              }
              if (type == '1') {
                _that.citizenPhoto.splice(index, 1)
              }
              if (type == '2') {
                _that.jiuzhuguocheng.splice(index, 1)
              }
              _that.$message({
                type: 'warning',
                message: '删除成功!'
              });
            } else {
              _that.$message({
                type: 'warning',
                message: '删除失败!'
              });
            }
          })()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      getgetSpecimenName() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.getSpecimenName + '?areaId=' + _that.areaId)
          if (res.data.code == '200') {
            let arr = [];
            res.data.data.forEach(e => {
              let z = {
                value: e.id,
                label: e.name
              }
              arr.push(z);
            })

            _that.options = arr;
          } else {
            _that.$message({
              type: 'warning',
              message: '获取样本失败!'
            });
          }
        })()
      },
      getgetSpecimenInfo(id) {
        let _that = this;
        if (id != null) {
          (async function f() {
            let res = await http.get(api.getSpecimenInfo + '?id=' + id)
            if (res.data.code == '200') {
              if (res.data.data != null) {
                _that.Specimen = res.data.data;
              } else {
                _that.Specimen.fileUrl = '';
                _that.Specimen.animalName = '';
                _that.Specimen.description = '';
                _that.Specimen.distributionRange = '';
                _that.Specimen.distributionStatus = '';
                _that.Specimen.characteristic = '';
              }
            } else {
              _that.$message({
                type: 'warning',
                message: '获取物种信息失败!'
              });
            }
          })()
        } else {
          _that.Specimen.fileUrl = '';
          _that.Specimen.animalName = '';
          _that.Specimen.description = '';
          _that.Specimen.distributionRange = '';
          _that.Specimen.distributionStatus = '';
          _that.Specimen.characteristic = '';
        }
      },
      getSpecimenLevel(val) {
        let _that = this;
        if (val != null) {
          (async function f(){
            let res = await http.get(api.getSpecimenLevel + '?name=' + val)
            if (res.data.code == '200') {
              if (res.data.data != null) {
                _that.ruleForm.protectionLevel = res.data.data
              }
            }
          })()
        }
      },
      shanchu(data) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _that = this;
          (async function f() {
            let res = await http.delete(api.delete + '?id=' + data.id)
            if (res.data.code == '200') {
              _that.$message({
                type: 'success',
                message: '删除成功!'
              });
              _that.getPage();
            } else {
              _that.$message({
                type: 'warning',
                message: '删除失败!'
              });
            }
          })()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          let r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
        });
      },
      getgetNumber() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.getNumber, {
            areaId: _that.areaId,
            accomplish: _that.accomplish
          })
          if (res.data.code == '200') {
            let arr = [];
            res.data.data.forEach(e => {
              let z = {
                value: e,
                label: e
              }
              arr.push(z)
            })

            _that.numberList = arr;
          }

        })()
      },
      openform(n, data) {
        this.isform = true;
        let _that = this;
        setTimeout(function () {
          _that.creationMap();
        }, 500);
        if (n == 0) {
          this.uuid = this.guid();
          this.Specimen = {};
          this.ruleForm.accomplish = 0;
        } else {
          this.uuid = data.id;
          this.ruleForm = Object.assign({}, data);
          this.address = data.lon + ',' + data.lat;
          this.value = data.sampleId;
          this.getgetSpecimenInfo(this.value);
          (async function f() {
            let re = await http.get(api.getImages + '?id=' + _that.uuid + '&groupType=2')
            if (re.data.code == '200') {
              _that.jiuzhuguocheng = re.data.data;
            }
          })();
          (async function f() {
            let re = await http.get(api.getImages + '?id=' + _that.uuid + '&groupType=1')
            if (re.data.code == '200') {
              _that.citizenPhoto = re.data.data;
            }
          })();
          (async function f() {
            let re = await http.get(api.getImages + '?id=' + _that.uuid + '&groupType=0')
            if (re.data.code == '200') {
              _that.previewList = re.data.data;
            }
          })()
        }
      },
      chooseTime(data) {
        if (data != null) {
          let year = data[0].getFullYear();
          let month = (data[0].getMonth() + 1) > 10 ? (data[0].getMonth() + 1) : "0" + (data[0].getMonth() + 1);
          let day = data[0].getDate() > 10 ? data[0].getDate() : "0" + data[0].getDate();
          this.startDate = year + '-' + month + '-' + day;

          let years = data[1].getFullYear();
          let months = (data[1].getMonth() + 1) > 10 ? (data[1].getMonth() + 1) : "0" + (data[1].getMonth() + 1);
          let days = data[1].getDate() > 10 ? data[1].getDate() : "0" + data[1].getDate();

          this.endDate = years + '-' + months + '-' + days;

        } else {
          this.startDate = '';
          this.endDate = ''
        }
        this.pageNum = 1;
        this.currentPage = 1;
        this.getPage()

      },
      getPage() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.page, {
            areaId: _that.areaId,
            startDate: _that.startDate,
            endDate: _that.endDate,
            level: _that.level,
            keyword: _that.keyword,
            serialNumber: _that.serialNumber,
            accomplish: _that.accomplish,
            pageSize: 12,
            pageNum: _that.pageNum
          })

          if (res.data.code == '200') {
            _that.pageList = res.data.data.content;
            _that.totalElements = res.data.data.totalElements;
          }

        })()
      },
      submitForm(formName) {
        if (this.ruleForm.serialNumber == '') {
          this.$message({
            message: '档案号不能为空',
            type: 'warning'
          });
        } else if (this.ruleForm.animalName == '') {
          this.$message({
            message: '动物名称不能为空',
            type: 'warning'
          });
        } else {
          let obj = Object.assign({}, this.ruleForm), _that = this;
          if (this.address !== '') {
            obj['lon'] = this.address.split(',')[0];
            obj['lat'] = this.address.split(',')[1];
          } else {
            obj['lon'] = '';
            obj['lat'] = '';
          }
          obj['sampleId'] = this.value;
          obj['id'] = this.uuid;
          obj['areaId'] = this.areaId;
          obj.insertDate = new Date(obj.insertDate).getTime();
          (async function f() {
            let res = await http.post(api.addOrUpdate, obj)
            if (res.data.code == '200') {
              _that.$message({
                message: '保存成功',
                type: 'success'
              });
              _that.isform = false;
              _that.getPage();
              _that.getgetNumber();
            } else {
              _that.$message({
                message: res.data.message,
                type: 'warning'
              });
            }
          })()

        }
      },
      closeform() {
        this.isform = false;
        for (let k in this.ruleForm) {
          this.ruleForm[k] = ''
        }
        this.address = "";
        this.addressList = [];
        this.keywords = '';
        this.previewList = [];
        this.citizenPhoto = [];
        this.jiuzhuguocheng = [];
        this.value = ''
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getla(data) {
        if (this.marker != null) {
          this.map.remove(this.marker)
        }
        this.map.setZoomAndCenter(18, [data.location.split(',')[0], data.location.split(',')[1]]);
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(data.location.split(',')[0], data.location.split(',')[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: data.name
        });
        this.map.add(this.marker);

        this.address = data.location;
      },
      xzdd() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.inputtips, {
            key: '35df5aca1cd037d2148879f639be4006',
            keywords: _that.keywords,
            type: '',
            location: '',
            city: '北京',
            datatype: "all"
          })
          if (res.data.status == '1' && res.data.tips.length > 0) {
            let arr = [];
            res.data.tips.forEach(e => {
              if (e.location != '') {
                arr.push(e)
              }
            })
            if (arr.length > 0) {
              _that.addressList = arr;
            } else {
              _that.$message({
                message: '暂无搜索结果',
                type: 'warning'
              });
              _that.addressList = [];
            }
          } else {
            _that.$message({
              message: '暂无搜索结果',
              type: 'warning'
            });
            _that.addressList = [];
          }
        })()
      },
      creationMap() {
        this.map = new AMap.Map('container', {
          zoom: 11,//级别
          center: [116.397428, 39.90923],//中心点坐标
          viewMode: '3D'//使用3D视图
        });
      },
      getimgList(event) {
        let file = event.target.files, _that = this;
        let formData = new FormData();
        formData.append('id', _that.uuid);
        formData.append('groupType', "0");
        for (let i = 0; i < file.length; i++) {
          formData.append('files', file[i]);
        }
        ;
        (async function f() {
          let res = await http.post(api.uploadImages, formData)
          if (res.data.code == '200') {
            _that.$message({
              message: '上传成功',
              type: 'success'
            });
            (async function f() {
              let re = await http.get(api.getImages + '?id=' + _that.uuid + '&groupType=0')
              if (re.data.code == '200') {
                _that.previewList = re.data.data;
              }
            })()
          } else {
            _that.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        })()
      },
      getcitizen(event) {
        let file = event.target.files, _that = this;
        let formData = new FormData();
        formData.append('id', _that.uuid);
        formData.append('groupType', "1");
        for (let i = 0; i < file.length; i++) {
          formData.append('files', file[i]);
        }
        ;

        (async function f() {
          let res = await http.post(api.uploadImages, formData)
          if (res.data.code == '200') {
            _that.$message({
              message: '上传成功',
              type: 'success'
            });
            (async function f() {
              let re = await http.get(api.getImages + '?id=' + _that.uuid + '&groupType=1')
              if (re.data.code == '200') {
                _that.citizenPhoto = re.data.data;
              }
            })()
          } else {
            _that.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        })()

      },
      getjzgc(event) {
        let file = event.target.files, _that = this;
        let formData = new FormData();
        formData.append('id', _that.uuid);
        formData.append('groupType', "2");
        for (let i = 0; i < file.length; i++) {
          formData.append('files', file[i]);
        }
        ;
        // jiuzhuguocheng

        (async function f() {
          let res = await http.post(api.uploadImages, formData)
          if (res.data.code == '200') {
            _that.$message({
              message: '上传成功',
              type: 'success'
            });
            (async function f() {
              let re = await http.get(api.getImages + '?id=' + _that.uuid + '&groupType=2')
              if (re.data.code == '200') {
                _that.jiuzhuguocheng = re.data.data;
              }
            })()
          } else {
            _that.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        })()

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val;
        this.getPage();
      }
    },
  }
</script>

<style scoped>
  @import "../../static/css/inhand.css";
</style>
